<template>
    <!-- 使用toRefs 可以简写取值的方式 -->
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>薪资：{{job.job2.salary}} k</h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.job2.salary++">增长薪资</button>

    <hr>
    <h1>当前求和：{{sum}}</h1>
    <button @click="sum++">点我加一</button>
</template>

<script>
    // Vue3中的computed 是一个组合式的api，所以需要通过import 进行引入。
    import { ref, reactive, toRefs, readonly, shallowReadonly } from 'vue';
    export default {
        name: 'Demo',
        setup() {
            // 数据
            // let person = shallowReactive({ // 只考虑第一层次数据的响应式
            //     name: '张三',
            //     age: 18,
            //     job: {
            //         job2: {
            //             salary: 20
            //         }
            //     }
            // });

            let person = reactive({
                name: '张三',
                age: 18,
                job: {
                    job2: {
                        salary: 20
                    }
                }
            });
            let sum = ref(0);

            // 1、让一个响应式数据变为只读的（深只读），加工之后仅仅只读，不可以修改
            // person = readonly(person);
            // sum = readonly(sum);
            
            // 2、让一个响应式数据变为只读的（浅只读）。
            person = shallowReadonly(person);

            // 返回一个对象（常用）
            return {
                sum,
                ...toRefs(person),
            }
        }
    }
</script>

<style>

</style>